<template>
  <div id="page-play" class="page-play">
    <div v-for="item in 10" :key="item">
      <h1>img</h1>
      longlonglable
    </div>
    <div>
      <h1>img</h1>
      <img id="img-monkey" :src="realSrc" alt="img" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";

const srcList = ref([
  {
    src: "/歇逼猴.png",
    name: "歇逼猴",
  },
]);

const realSrc = ref("");

onMounted(() => {
  const imgMonkey = document.getElementById("img-monkey");
  if (!imgMonkey) return;
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        realSrc.value = srcList.value[0].src;
      } else {
        realSrc.value = ""; // 如果图片不在视口中，则不显示图片
      }
    });
  });
  observer.observe(imgMonkey);
});

onUnmounted(() => {
  if (observer) {
    observer.disconnect();
  }
});
</script>

<style scoped>
.page-play {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
</style>
